<template>
  <div class="ApplicationForm">
    <div class="ApplicationForm-table">
      <div class="button">
        <el-button size="default" @click="onOpenAddRole('add')" :icon="CirclePlus" type="primary"> 新增 </el-button>
      </div>
      <div class="ApplicationForm-table-ls">
        <pure-table
          ref="tableRef"
          :row-key="row => row.tid"
          highlight-current-row
          adaptive
          border
          align-whole="center"
          show-overflow-tooltip
          :data="tableData"
          :columns="columns"
          class="pure-table"
        >
          <template #caoZuo="scope">
            <!--            <el-button type="primary" link :icon="EditPen" @click="onOpenEditRole('edit', scope.row)">编辑</el-button>-->
            <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
              <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </pure-table>
      </div>
    </div>
    <add-dialog-form-group ref="addDialogFormRef" @refresh="getTableData()" @add-on-submit="addOnSubmit" />
  </div>
</template>
<script setup lang="ts">
import { CirclePlus, Delete } from "@element-plus/icons-vue";
import { computed, ref, watch } from "vue";
import AddDialogFormGroup from "@/views/DataMaintenance/IntegratedProject/components/TagProject/components/addDialogFormGroup.vue";
import { useIntegratedProject } from "@/stores/modules/integratedProject";
import { useHandleData } from "@/hooks/useHandleData";
import { DeleteBaoHanZuHeXiangMuDel, PostBaoHanZuHeXiangMuAdd } from "@/api/modules/integratedProject";
import { ElMessage } from "element-plus";

const columns = [
  {
    label: "序号",
    type: "index",
    width: "70"
  },
  // {
  //   label: "申请单名称",
  //   prop: "name"
  // },
  {
    label: "组合项目名称",
    prop: "ZuHeXiangMuMingCheng"
  },
  {
    label: "组合项目ID",
    prop: "ZuHeXiangMuID"
  },
  {
    label: "包含组合项目ID",
    prop: "BaoHanZuHeXiangMuID"
  },
  {
    label: "包含关系ID",
    prop: "BaoHanGuanXiID"
  },
  {
    label: "操作",
    fixed: "right",
    width: "70",
    slot: "caoZuo"
  }
];
const tableData = ref<any>([]);
const tableRef = ref();
const deleteAccount = async (row: Partial<any> = {}) => {
  await useHandleData(DeleteBaoHanZuHeXiangMuDel, row.BaoHanGuanXiID, `删除【${row.ZuHeXiangMuMingCheng}】`);
  useIntegratedProject().getBaoHanZuHeXiangMuSel();
};
const addDialogFormRef = ref();
// 打开新增弹窗
const onOpenAddRole = (type: string) => {
  if (useIntegratedProject().zuHeXiangMuID) {
    addDialogFormRef.value.openDialog(type);
  } else {
    ElMessage.error("请先选择组合项目");
  }
};
// 打开修改角色弹窗
// const onOpenEditRole = (type: string, row: Object) => {
//   addDialogFormRef.value.openDialog(type, row);
// };
const getTableData = () => {
  useIntegratedProject().getBaoHanZuHeXiangMuSel();
};

const addOnSubmit = (objLS: any) => {
  console.log(objLS.listRight, "listRight");
  const newArr: String[] = [];
  if (objLS.listRight.length <= 0) {
    ElMessage.error("请选择组合项目明细");
  } else {
    objLS.listRight.map((item: any) => {
      newArr.push(item.key);
    });
    let obj = {
      // 中间的 那个组合项目 的
      strZuHeXiangMuID: useIntegratedProject().zuHeXiangMuID,
      //选择 T8;T9
      strBaoHanZuHeXiangMuID: newArr.join(";")
    };

    PostBaoHanZuHeXiangMuAdd(obj.strZuHeXiangMuID, obj.strBaoHanZuHeXiangMuID).then((res: any) => {
      if (res.Success === 0) {
        addDialogFormRef.value.closeDialog();
        getTableData();
        ElMessage.success("添加成功");
      }
    });
  }
};

const newShenQingDanOption = computed(() => {
  return useIntegratedProject().baoHanZuHeOption;
});
watch(newShenQingDanOption, () => {
  tableData.value = [...newShenQingDanOption.value] as any;
});
</script>
<style scoped lang="scss">
.ApplicationForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .ApplicationForm-search {
    height: 25px;
    padding: 10px 20px;
    background: white;
    .ApplicationForm-search-span-ls {
      font-size: larger;
      font-weight: 900;
      line-height: 0;
      color: #239487;
    }
    .ApplicationForm-search-span {
      margin-left: 5px;
      color: #239487;
    }
  }
  .ApplicationForm-table {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px 20px;
    margin-top: 8px;
    background: white;
    .ApplicationForm-table-ls {
      display: flex;
      flex: 1;
      margin-top: 10px;
      .pure-table {
        flex: 1;
      }
    }
  }
}
</style>
